<template>
  <div class="space-y-2">  
    <div class="flex space-x-2">
      <button @click="unmarkAll" class="flex-1 px-3 py-1.5 bg-gray-500 hover:bg-gray-600 text-white text-sm rounded-lg transition-colors">
        <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
        </svg>
        取消
      </button>
      
      <button @click="invertAllMarks" class="flex-1 px-3 py-1.5 bg-purple-500 hover:bg-purple-600 text-white text-sm rounded-lg transition-colors">
        <svg class="w-4 h-4 inline mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"></path>
        </svg>
        反选
      </button>
    </div> 
  </div>
</template>

<script setup lang="ts">
interface Props {
  selectedCount: number
  duplicateCount: number
  savedSpace: string
}

const props = defineProps<Props>()

// 定义emits
const emit = defineEmits<{
  'unmark-all': []
  'invert-marks': []
}>()

const unmarkAll = () => {
  console.log('取消所有标记')
  emit('unmark-all')
}

const invertAllMarks = () => {
  console.log('反选所有标记')
  emit('invert-marks')
}
</script>
